{% extends "common/base.html" %}
{% block title%}
自然风光
{% endblock %}

{% block main %}






<!--<!DOCTYPE html>-->

<!--<html lang="zh-CN">-->
<!--<head>-->



<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>美丽家乡 - 山水之城</title>-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--            font-family: '微软雅黑', sans-serif;-->
<!--        }-->

<!--        body {-->
<!--            background-color: #f5f5f5;-->
<!--        }-->

<!--        /* 导航栏样式 */-->
<!--        .navbar {-->
<!--            background-color: #fff;-->
<!--            padding: 1rem 5%;-->
<!--            box-shadow: 0 2px 5px rgba(0,0,0,0.1);-->
<!--            position: fixed;-->
<!--            width: 100%;-->
<!--            top: 0;-->
<!--            z-index: 1000;-->
<!--        }-->

<!--        .nav-links {-->
<!--            display: flex;-->
<!--            justify-content: flex-end;-->
<!--            list-style: none;-->
<!--        }-->

<!--        .nav-links a {-->
<!--            color: #333;-->
<!--            text-decoration: none;-->
<!--            margin-left: 2rem;-->
<!--            padding: 0.5rem 1rem;-->
<!--            transition: color 0.3s;-->
<!--        }-->
<style>
        /* 欢迎横幅 */
        .banner {
            height: 900px;
           background-image:url("/static/images/hubeienshi.jpg");
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;

        }

<!--        /* 家乡简介 */-->
<!--        .intro {-->
<!--            padding: 4rem 5%;-->
<!--            background-color: white;-->
<!--        }-->

<!--        /* 特色景点 */-->
<!--        .attractions {-->
<!--            padding: 4rem 5%;-->
<!--        }-->

<!--        .card-container {-->
<!--            display: grid;-->
<!--            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));-->
<!--            gap: 2rem;-->
<!--            margin-top: 2rem;-->
<!--        }-->

<!--        .card {-->
<!--            background: white;-->
<!--            border-radius: 10px;-->
<!--            overflow: hidden;-->
<!--            box-shadow: 0 3px 10px rgba(0,0,0,0.1);-->
<!--        }-->

<!--        .card img {-->
<!--            width: 100%;-->
<!--            height: 200px;-->
<!--            object-fit: cover;-->
<!--        }-->

<!--        .card-content {-->
<!--            padding: 1.5rem;-->
<!--        }-->

<!--        /* 页脚 */-->
<!--        footer {-->
<!--            background-color: #333;-->
<!--            color: white;-->
<!--            padding: 2rem 5%;-->
<!--            text-align: center;-->
<!--        }-->
<!--        <style>-->
        .article-list {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .article-item {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 20px;
        }
        .article-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        .article-desc {
            color: #7f8c8d;
            margin-bottom: 15px;
        }
        .article-meta {
            font-size: 0.9em;
            color: #95a5a6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .category {
            color: #3498db;
        }
    </style>
<!--    </style>-->
<!--</head>-->
<!--<body>-->

<!--    &lt;!&ndash; 导航栏 &ndash;&gt;-->
<!--    <nav class="navbar">-->
<!--        <ul class="nav-links">-->
<!--            <li><a href="index.html">首页</a></li>-->
<!--             <li><a href="natural.html">自然风光</a></li>-->
<!--            <li><a href="food.html">特色美食</a></li>-->
<!--             <li><a href="history.html">历史文化</a></li>-->
<!--             <li><a href="">民俗风情</a></li>-->
<!--             <li><a href="">旅行攻略</a></li>-->
<!--             <li><a href="">畅言云阁</a></li>-->
<!--             <li><a href="">注册</a></li>-->
<!--             <li><a href="">登录</a></li>-->
<!--             <li><a href="">关于我们</a></li>-->
<!--             <li><a href="">联系我们</a></li>-->
<!--        </ul>-->
<!--    </nav>-->

    <!-- 欢迎横幅 -->
    <section class="banner">
        <div>
            <h1 style="font-size: 3rem; margin-bottom: 1rem;">承大美于天地</h1>
            <h2 style="font-size: 3rem; margin-bottom: 1rem;">纳山河于表里</h2>
            <p style="font-size: 1.2rem;">荆楚之韵，大美湖北</p >
        </div>
    </section>

       <!-- 家乡简介 -->

    <section class="intro">
        <h2>湖北</h2>
        <p style="margin-top: 2.5rem; line-height: 2.8;">
            <img src="/static/images/hubei.jpg"  alt="" >
    </section>





        <h2>自然风光</h2>


  <div class="article-list">
        <h2 style="text-align: center; color: #34495e;">最新文章</h2>

        <!-- 文章项1 -->
        <div class="article-item">

            <h3 class="article-title">武当山</h3>
            <p class="article-desc">太岳”、“玄岳” 、“大岳</p >
            <span><a href="{% url 'app:article_detail'%}">阅读全文</a></span>
            <div class="article-meta">
               <span><i class="category">分类:自然风光: </i>地点:湖北省西北部十堰市丹江口市</span>
<!--                   <div class="article">-->
<!--                       分类:{{item.fenlei }}<span>地点:{{item.didian}}</span>-->
<!--                                    </div>-->

            </div>
        </div>


        <div class="article-item">
            <h3 class="article-title">黄鹤楼</h3>
            <p class="article-desc">天下第一楼</p >
           <span><a href="{% url 'app:article_detail2'%}">阅读全文</a></span><br>
            <div class="article-meta">
                 <span><i class="category">分类:自然风光 </i>地点:湖北省恩施土家族苗族自治州恩施市屯堡乡</span>

            </div>
        </div>
    </div>

     <!-- 文章项3 -->
        <div class="article-item">
            <h3 class="article-title">三峡大瀑布景区</h3>
            <p class="article-desc">三峡大瀑布（原名白果树瀑布）</p >
          <span><a href="{% url 'app:article_detail3'%}">阅读全文</a></span><br>
            <div class="article-meta">
                 <span><i class="category">分类：自然风光  </i> 地点：湖北省宜昌市夷陵区黄花镇</span>

            </div>
        </div>

     <!-- 文章项4-->
        <div class="article-item">
            <h3 class="article-title">恩施州恩施大峡谷景区</h3>
            <p class="article-desc"> 国家AAAAA级旅游景区</p >
 <span><a href="{% url 'app:article_detail4'%}">阅读全文</a></span>
            <div class="article-meta">
                 <span><i class="category">分类：自然风光  </i> 地点：湖北省恩施土家族苗族自治州恩施市屯堡乡</span>

            </div>
        </div>
  <!-- 文章项5 -->
        <div class="article-item">
            <h3 class="article-title">神农架</h3>
            <p class="article-desc">神农架林区</p >
       <span><a href="{% url 'app:article_detail5'%}">阅读全文</a></span><br>
            <div class="article-meta">
                 <span><i class="category">分类：自然风光  </i> 地点：湖北省西北部</span>

            </div>
        </div>
         <!-- 文章项6 -->
        <div class="article-item">
            <h3 class="article-title">腾龙洞</h3>
            <p class="article-desc">湖北省恩施土家族苗族自治州的国家5A级旅游景区</p >
       <span><a href="{% url 'app:article_detail6'%}">阅读全文</a></span><br>
            <div class="article-meta">
                 <span><i class="category">分类：自然风光  </i> 地点：湖北省恩施土家族苗族自治州利川市</span>

            </div>
        </div>
        <!-- 文章项7 -->
        <div class="article-item">
            <h3 class="article-title">荆州古城</h3>
            <p class="article-desc">湖北省荆州市的国家AAAA级旅游景区</p >
       <span><a href="{% url 'app:article_detail7'%}">阅读全文</a></span><br>
            <div class="article-meta">
                 <span><i class="category">分类：自然风光  </i> 地点：湖北省荆州市荆州区张居正街2号</span>

            </div>
        </div>
<!--         &lt;!&ndash; 文章项8&ndash;&gt;-->
<!--        <div class="article-item">-->
<!--            <h3 class="article-title">黄鹤楼</h3>-->
<!--            <p class="article-desc">天下第一楼</p >-->
<!--       <span><a href="{% url 'app:article_detail'%}">阅读全文</a></span><br>-->
<!--            <div class="article-meta">-->
<!--                 <span><i class="category">分类：自然风光  </i> 地点：湖北省 武汉市 武昌区</span>-->

<!--            </div>-->
<!--        </div>-->


    <!-- 页脚 -->
<!--    <footer>-->
<!--        <p>© 2023 山水之城文化旅游局 版权所有</p >-->
<!--        <p style="margin-top: 1rem;">联系方式：xxx-xxxxxxxx</p >-->
<!--    </footer>-->
<!--</body>-->
<!--</html>-->

     {% endblock %}